<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-checkbox-group v-model="checklist1">
			<gr-checkbox label="java">JAVA</gr-checkbox>
			<gr-checkbox label="python">Python</gr-checkbox>
			<gr-checkbox label="php">PHP</gr-checkbox>
			<gr-checkbox label="JS">JS</gr-checkbox>
		</gr-checkbox-group>
		<p>checklist: {{checklist1}}</p>
		<p class="title">按钮样式</p>
		<gr-checkbox-group v-model="checklist2">
			<gr-checkbox button label="java">JAVA</gr-checkbox>
			<gr-checkbox button label="python">Python</gr-checkbox>
			<gr-checkbox button label="php">PHP</gr-checkbox>
		</gr-checkbox-group>
		<p>checklist: {{checklist2}}</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checklist1: ['php'],
				checklist2: ['java'],
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
	}
</style>
